<template>
    <view class="page">
        <u-navbar title="服务订单" :custom-back="goMy" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar>
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <template #top>
                <!-- <view class="order-tab">
                    <view class="tab" v-for="item,index in stateList" :key="index" :class="{'action':(queryParams.type==item.dictValue)}" @click="onOrderTab(item.dictValue)">
                        <text>{{item.dictLabel}}</text>
                        <text class="line"></text>
                    </view>
                </view> -->
                <z-tabs class="service-tab" :current="tabIndex" :style="'top:'+ (titletop+titleheight)+'px'" :list="tabList" active-color="#2e996f"
                    @change="tabChange" />
            </template>
            <view class="order-list">
                <view class="list">
                    <view class="lib" v-for="(item, index) in dataList" :key="index" @click="onOrderList(item.order_no)">
                        <view class="title-status">
                            <view class="title">
                                <text class="p1">订单号：</text>
                                <text class="p2">{{item.order_no}}</text>
                            </view>
                            <view class="status">
                                <text>{{selectDictLabel(stateList,item.order_state)}}</text>
                                <!-- 订单状态 '':全部 -1:已取消 0:未接单 1:已接单 2:已(服务)完成 -->
                                <text class="iconfont icon-laji del" v-if="item.order_state===-1 || item.order_state===2" @click.stop="del(item.order_no)">
                                </text>
                            </view>
                        </view>
                        <view class="goods-list">
                            <view class="goods">
                                <view class="thumb">
                                    <image :src="item.cover_pict" mode="widthFix"></image>
                                </view>
                                <view class="item">
                                    <view class="goods-name">
                                        <text class="title one-omit">
                                            {{item.name}}
                                        </text>
                                        <text class="desc">下单时间：{{item.order_create_time}}</text>
                                        <text class="desc">服务时间：{{item.service_time}}</text>

                                    </view>
                                    <view class="goods-price">
                                        <text class="price">{{item.pay_price}}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="status-btn">
                            <view class="code">
                                <text>服务完成码：{{item.service_code}}</text>
                            </view>
                            <view class="button">
                                <view class="btn" v-if="item.order_state=='0'" @click.stop="cancle(item.order_no)">
                                    <text>取消订单</text>
                                </view>
                                <view class="btn" v-if="item.order_state=='1'" @click.stop="complete(item.order_no)">
                                    <text>完成订单</text>
                                </view>
                                <view class="btn" v-if="item.order_state=='2'" @click.stop="evaluate(item)">
                                    <text>去评价</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </z-paging>
        <DialogBox ref="DialogBox"></DialogBox>
    </view>
</template>

<script>
import { serviceState } from "@/api/dictionary.js"
import { getServiceLists, setServiceOrderToCancel, setServiceOrderToDel, setServiceOrderToComplete } from "@/api/my/orderList.js"
export default {
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 20,
                type: '',
            },
            stateList: serviceState, //订单状态 '':全部 -1:已取消 0:未接单 1:已接单 2:已(服务)完成
            tabList: [],
            dataList: [],
            loading: true,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            titleheight: 0,
            titletop: 0,
            tabIndex: 0,
        };
    },
    onLoad(params) {
        if (params) {
            this.queryParams.type = params.type;
            this.tabIndex = this.stateList.findIndex(item => item.dictValue == params.type)
        }
        // #ifdef MP-WEIXIN
        getApp().getHeight();
        this.titleheight = getApp().titleheight;
        this.titletop = getApp().titletop;
        // #endif
    },
    onShow() {
        this.tabList = []
        this.stateList.forEach(e => {
            this.tabList.push(e.dictLabel)
        });
    },
    methods: {
        getList(page) {
            this.loading = true
            this.queryParams.page = page
            getServiceLists(this.queryParams).then(res => {
                console.log(res, 788888)
                this.$refs.paging.complete(res.data.lists);
                this.loading = false
            }).catch(err => {
                this.$refs.paging.complete(false);
                this.loading = false
            })
        },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 订单tab点击
         */
        onOrderTab(type) {
            this.queryParams.type = type;
            this.$refs.paging.reload();
        },
        /**
         * 订单列表点击
         */
        onOrderList(orderNo) {
            uni.navigateTo({
                url: '/pagesA/my/serviceDetail?orderNo=' + orderNo,
            })
        },
        cancle(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要取消订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToCancel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已取消订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        complete(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要完成订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToComplete({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("订单已完成")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        del(id) {
            this.$refs['DialogBox'].confirm({
                title: '提示',
                content: '是否要删除订单?',
                DialogType: 'inquiry',
                animation: 0
            }).then(() => {
                setServiceOrderToDel({ order_no: id }).then(res => {
                    if (res.code == 1) {
                        this.getList(1)
                        this.$message("已删除订单")
                    }
                })
            }).catch(err => {
                console.log(err);
            })
        },
        evaluate(row){
                uni.navigateTo({
                    url: '/pagesA/my/myEvaluatePush?key=' + encodeURIComponent(JSON.stringify(row))
                })
        },
        goMy() {
            uni.reLaunch({
                url: '/pages/my/my'
            })
        },
        tabChange(index) {
            this.tabIndex = index;
            // this.cateId = this.tabList[index].id
            // //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
            this.queryParams.type = this.stateList[index].dictValue;
            this.$refs.paging.reload();
        },
    }
}
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

/* 订单列表 */
.order-list {
  width: 100%;

  .list {
    .lib {
      padding: 0 4%;
      min-height: 400rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .title-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        .title {
          display: flex;
          align-items: center;
          line-height: 26rpx;
          .p1 {
            font-size: 26rpx;
            color: #3c3c3c;
          }
          .p2 {
            font-size: 26rpx;
            color: #989898;
          }
        }
        .status {
          display: flex;
          align-items: center;
          text {
            font-size: 26rpx;
            color: #e5530e;
          }
          .del {
            padding: 10rpx;
            font-size: 34rpx;
            color: #222222;
            background-color: #f6f6f6;
            border-radius: 100%;
            margin-left: 20rpx;
          }
        }
      }
      .goods-list {
        width: 100%;
        padding: 30rpx 0;
        border-top: 2rpx solid #dcdcdc;
        border-bottom: 2rpx solid #dcdcdc;
        .goods {
          display: flex;
          align-items: center;
          width: 100%;
          .thumb {
            display: flex;
            align-items: center;
            width: 25%;
            height: 100%;
            image {
              width: 160rpx;
              height: 160rpx;
              border-radius: 10rpx;
            }
          }
          .item {
            display: flex;
            align-items: center;
            width: 75%;
            height: 100%;
            justify-content: space-between;
            .goods-name {
              width: 70%;
              height: 100%;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .title {
                font-size: 26rpx;
                color: #0a0a0a;
                font-weight: 600;
                margin-bottom: 14rpx;
              }
              .desc {
                display: block;
                font-size: 24rpx;
                color: #999999;
              }
              text:nth-child(2) {
                margin-bottom: 14rpx;
              }
            }
            .goods-price {
              display: flex;
              flex-direction: column;
              text-align: right;
              .price {
                font-size: 26rpx;
                color: #3c3c3c;
                margin-bottom: 30rpx;
              }
              .num {
                font-size: 26rpx;
                color: #3c3c3c;
              }
              // text {
              //   color: #222222;
              // }
              // .min {
              //   font-size: 26rpx;
              // }
              // .max {
              //   font-size: 34rpx;
              // }
            }
          }
        }
      }
      .status-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        .code {
          text {
            font-size: 24rpx;
            color: #e8380d;
          }
        }
        .button {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          height: 100%;
          .btn {
            padding: 10rpx 30rpx;
            border: 2rpx solid #eeeeee;
            border-radius: 100rpx;
            margin-left: 20rpx;
            text {
              font-size: 26rpx;
              color: #555555;
            }
          }
          .action {
            background-color: #ea5504;
            border: 2rpx solid #e5530e;
            text {
              color: #ffffff;
            }
          }
        }
      }
    }
    /deep/.uni-scroll-view::-webkit-scrollbar {
      display: none;
    }
  }
}

/* 订单tab */
.service-tab {
  position: fixed;
  left: 0;
  // #ifdef APP-PLUS || H5
  top: calc(88rpx + var(--status-bar-height));
  // #endif
  z-index: 999;
  width: 100%;

  /deep/.z-tabs-conatiner {
    height: 120rpx;
    padding-top: 30rpx;
  }
}
/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(125rpx + var(--status-bar-height)) !important;
}
</style>
